<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Table from "./Table.svelte";
    import Space from "../Space/Space.svelte";
    import Button from "../Button/Button.svelte";
    import { writable } from "svelte/store";
    import type { ColumnProps } from "./Table";

    const { Story } = defineMeta({
        title: "Components/Form/Table",
        component: Table,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    const columns = [
        { type: "index", title: "序号", width: "80px" },
        {
            name: "name",
            title: "名称",
            minWidth: 100,
            maxWidth: 150,
            tooltip: {
                style: "width: 200px",
                align: "bottom",
            },
        },
        { name: "x", title: "X" },
        { name: "y", title: "Y" },
        { name: "date", title: "日期", width: "200px" },
    ];

    const data: any[] = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: "name_name_name_name_name_" + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString(),
        });
    }
    const data2: any[] = [];
    for (let i = 0; i < 5; i++) {
        data2.push({
            id: 50 + i,
            name: "name_name_name_name_name_" + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString(),
        });
    }

    let loading = $state(false);
    let selectedRowKeys = $state([1]);
    let d = $state(data);
    let height = $state(400);
</script>

<Story name="Default">
    {#snippet template(args)}
        <Table {columns} {data} />
    {/snippet}
</Story>

<Story name="Border">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border />
    {/snippet}
</Story>
<Story name="Stripe">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border stripe />
    {/snippet}
</Story>
<Story name="FixedHead">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border height={200} />
    {/snippet}
</Story>
<Story name="SmallSize">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border size="small" />
    {/snippet}
</Story>

<Story name="Loading">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border size="small" {loading} />
        <Button
            onclick={() => {
                loading = !loading;
            }}>加载/完成</Button
        >
    {/snippet}
</Story>

<Story name="SpanMethod">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table
            {columns}
            {data}
            border
            size="small"
            {loading}
            spanMethod={(row: any, col: ColumnProps, rowIndex: number, columnIndex: number) => {
                if (rowIndex === 0 && columnIndex === 0) {
                    return [1, 2];
                } else if (rowIndex === 0 && columnIndex === 1) {
                    return [0, 0];
                }
                if (rowIndex === 2 && columnIndex === 0) {
                    return [2, 1];
                } else if (rowIndex === 3 && columnIndex === 0) {
                    return [0, 0];
                }
            }}
        />
        <Button
            onclick={() => {
                loading = !loading;
            }}>加载/完成</Button
        >
    {/snippet}
</Story>

<Story name="Checkable">
    {#snippet template(args)}
        {@const columns = [
            { type: "checkbox", width: "55px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} data={d} border size="small" bind:selectedRowKeys />
        <Button
            onclick={() => {
                selectedRowKeys = [1, 2];
            }}>选择</Button
        >
        <Button
            onclick={() => {
                d[1]._disabled = !d[1]._disabled;
            }}>禁用</Button
        >
        <Button
            onclick={() => {
                d = data2;
            }}>设置新数据</Button
        >
        <Button
            onclick={() => {
                d = data;
            }}>还原数据</Button
        >
    {/snippet}
</Story>

<Story name="Sort">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称", sort: true },
            { name: "x", title: "X", sort: true },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border />
    {/snippet}
</Story>
<Story name="Resize">
    {#snippet template(args)}
        {@const columns = [
            { name: "name", title: "名称", width: "150px", resize: true },
            { name: "x", title: "X", width: "300px", resize: true },
            { name: "y", title: "Y", width: "300px", resize: true },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border />
    {/snippet}
</Story>
{#snippet actionRender()}
    <Space>
        <Button size="small">添加</Button>
        <Button size="small">修改</Button>
    </Space>
{/snippet}
<Story name="renderColumn">
    {#snippet template(args)}
        {@const columns = [
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
            { name: "_op", title: "操作", width: "200px", render: actionRender },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border />
    {/snippet}
</Story>
<Story name="FixedColumn">
    {#snippet template(args)}
        {@const columns = [
            { name: "name", title: "名称", width: "150px", fixed: "left" },
            { name: "x", title: "X", width: "150px", resize: true },
            { name: "y", title: "Y", width: "150px" },
            { name: "date", title: "日期", width: "200px" },
            { name: "_op", title: "操作", width: "130px", fixed: "right", render: actionRender },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <div style="width: 700px;">
            <Table {columns} {data} border />
        </div>
    {/snippet}
</Story>

<Story name="TreeData">
    {#snippet template(args)}
        {@const columns = [
            {
                title: "Name",
                name: "name",
                tree: true,
                width: "100px",
            },
            {
                title: "Age",
                name: "age",
                width: "100px",
            },
            {
                title: "Address",
                name: "address",
                width: "300px",
            },
        ]}
        {@const data = [
            {
                id: "100",
                name: "John Brown",
                age: 18,
                address: "New York No. 1 Lake Park",
            },
            {
                id: "101",
                name: "Jim Green",
                age: 24,
                address: "London No. 1 Lake Park",
                _showChildren: true,
                children: [
                    {
                        id: "10100",
                        name: "John Brown",
                        age: 18,
                        address: "New York No. 1 Lake Park",
                    },
                    {
                        id: "10101",
                        name: "Joe Blackn",
                        age: 30,
                        address: "Sydney No. 1 Lake Park",
                    },
                    {
                        id: "10102",
                        name: "Jon Snow",
                        age: 26,
                        address: "Ottawa No. 2 Lake Park",
                        children: [
                            {
                                id: "1010200",
                                name: "Jim Green",
                                age: 24,
                                address: "New York No. 1 Lake Park",
                            },
                        ],
                    },
                ],
            },
            {
                id: "102",
                name: "Joe Black",
                age: 30,
                address: "Sydney No. 1 Lake Park",
            },
            {
                id: "103",
                name: "Jon Snow",
                age: 26,
                address: "Ottawa No. 2 Lake Park",
            },
        ]}
        <Table {columns} {data} border />
    {/snippet}
</Story>

{#snippet expandRender({ record, index }: any)}
    <div>{record.name}</div>
{/snippet}
<Story name="Expand">
    {#snippet template(args)}
        {@const columns = [
            {
                type: "expand",
                width: "50px",
                render: expandRender,
            },
            {
                title: "Name",
                name: "name",
                width: "100px",
                resize: true,
            },
            {
                title: "Age",
                name: "age",
                width: "100px",
                resize: true,
            },
            {
                title: "Address",
                name: "address",
                width: "300px",
            },
            {
                title: "Job",
                name: "job",
                width: "200px",
            },
            {
                title: "Book",
                name: "book",
                width: "250px",
            },
        ]}
        {@const data = [
            {
                name: "John Brown",
                age: 18,
                address: "New York No. 1 Lake Park",
                job: "Data engineer",
                interest: "badminton",
                birthday: "1991-05-14",
                book: "Steve Jobs",
                movie: "The Prestige",
                music: "I Cry",
            },
            {
                name: "Jim Green",
                age: 25,
                address: "London No. 1 Lake Park",
                job: "Data Scientist",
                interest: "volleyball",
                birthday: "1989-03-18",
                book: "My Struggle",
                movie: "Roman Holiday",
                music: "My Heart Will Go On",
            },
            {
                name: "Joe Black",
                age: 30,
                address: "Sydney No. 1 Lake Park",
                job: "Data Product Manager",
                interest: "tennis",
                birthday: "1992-01-31",
                book: "Win",
                movie: "Jobs",
                music: "Don’t Cry",
            },
            {
                name: "Jon Snow",
                age: 26,
                address: "Ottawa No. 2 Lake Park",
                job: "Data Analyst",
                interest: "snooker",
                birthday: "1988-7-25",
                book: "A Dream in Red Mansions",
                movie: "A Chinese Ghost Story",
                music: "actor",
            },
        ]}
        <Table {columns} {data} border />
    {/snippet}
</Story>

<Story name="HideHeader">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border showHeader={false} />
    {/snippet}
</Story>
<Story name="Title&Footer">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 5; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border>
            {#snippet title()}
                <div>Title</div>
            {/snippet}
            {#snippet footer()}
                <div>Footer</div>
            {/snippet}
        </Table>
    {/snippet}
</Story>

<Story name="ComplexHeader">
    {#snippet template(args)}
        {@const columns = [
            { name: "name", title: "姓名", width: 90 },
            {
                name: "subject",
                title: "科目",
                align: "center",
                children: [
                    {
                        name: "mainSubject",
                        title: "主课",
                        align: "center",
                        children: [
                            { name: "chinese", title: "语文", width: 200, resize: true, sort: true },
                            { name: "math", title: "数学", width: 200, minWidth: 100, resize: true, sort: true },
                            { name: "english", title: "英语", minWidth: 200 },
                        ],
                    },
                    {
                        name: "minorSubject",
                        title: "副课",
                        align: "center",
                        children: [
                            { name: "physics", title: "物理", minWidth: 200 },
                            { name: "chemistry", title: "化学", minWidth: 200 },
                        ],
                    },
                    { name: "tiyu", title: "体育", minWidth: 200, align: "center" },
                ],
            },
            { name: "date", title: "日期", width: "200px", align: "center" },
        ]}
        {@const data = [
            { name: "张三", chinese: 90, math: 80, english: 70, physics: 60, chemistry: 50, tiyu: 20, date: "2020-01-01" },
            { name: "李四", chinese: 80, math: 90, english: 70, physics: 60, chemistry: 50, tiyu: 20, date: "2020-01-02" },
            { name: "王五", chinese: 70, math: 80, english: 90, physics: 60, chemistry: 50, tiyu: 20, date: "2020-01-03" },
            { name: "赵六", chinese: 90, math: 80, english: 70, physics: 60, chemistry: 50, tiyu: 20, date: "2020-01-01" },
            { name: "赵六", chinese: 90, math: 80, english: 70, physics: 60, chemistry: 50, tiyu: 20, date: "2020-01-01" },
            { name: "赵六", chinese: 90, math: 80, english: 70, physics: 60, chemistry: 50, tiyu: 20, date: "2020-01-01" },
        ]}
        <Table {columns} {data} border></Table>
    {/snippet}
</Story>
<Story name="Empty">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data: any[] = []}
        <Table {columns} {data} border></Table>
    {/snippet}
</Story>

<Story name="Summary">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期" },
            { name: "_op", title: "操作", width: "130px", fixed: "right", render: actionRender },
        ]}
        {@const data = [
            { name: "张三", x: "1", y: "2", date: "2021-01-01" },
            { name: "李四", x: "3", y: "4", date: "2021-01-02" },
            { name: "王五", x: "5", y: "6", date: "2021-01-03" },
            { name: "赵六", x: "7", y: "8", date: "2021-01-04" },
            { name: "钱七", x: "9", y: "10", date: "2021-01-05" },
            { name: "孙八", x: "11", y: "12", date: "2021-01-06" },
            { name: "周九", x: "13", y: "14", date: "2021-01-07" },
            { name: "吴十", x: "15", y: "16", date: "2021-01-08" },
        ]}
        <Table {columns} {data} border showSummary></Table>

        <Table
            {columns}
            {data}
            border
            height={300}
            showSummary
            summaryMethod={(columns, data) => {
                const row: any = {};
                columns.forEach((col: ColumnProps, index: number) => {
                    const key = col.name!;
                    if (index === 0) {
                        row[key] = "共计";
                        return;
                    }
                    const values = data.map((item) => Number(item[key]));
                    if (!values.every((value) => isNaN(value))) {
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        row[key] = v + "单位";
                    } else {
                        row[key] = "N/A";
                    }
                });
                return row;
            }}
        />
    {/snippet}
</Story>

<Story name="OtherColumnType">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: 90 },
            { name: "name", title: "姓名", width: 90 },
            { type: "enum", enum: { 0: "禁用", 1: "启用" }, name: "status", title: "状态", width: 90 },
            { type: "date", name: "date", title: "日期", width: "200px" },
            { type: "datetime", name: "datetime", title: "时间", width: "200px" },
        ]}
        {@const data = [
            { name: "张三", status: 1, date: 1577836800000, datetime: 1577851200000 },
            { name: "李四", status: 0, date: 1577923200000, datetime: 1577937600000 },
            { name: "王五", status: 1, date: "2020-01-03", datetime: "2020-01-03 12:00:00" },
            { name: "赵六", status: 0, date: "2020-01-04", datetime: "2020-01-04 12:00:00" },
            { name: "钱七", status: 1, date: "2020-01-05", datetime: "2020-01-05 12:00:00" },
            { name: "孙八", status: 0, date: "2020-01-06", datetime: "2020-01-06 12:00:00" },
            { name: "周九", status: 1, date: "2020-01-07", datetime: "2020-01-07 12:00:00" },
            { name: "吴十", status: 0, date: "2020-01-08", datetime: "2020-01-08 12:00:00" },
        ]}
        <Table {columns} {data} border></Table>
    {/snippet}
</Story>
<Story name="FitContainer">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: 90 },
            { name: "name", title: "姓名", width: 90 },
            { type: "enum", enum: { 0: "禁用", 1: "启用" }, name: "status", title: "状态", width: 90 },
            { type: "date", name: "date", title: "日期", width: "200px" },
            { type: "datetime", name: "datetime", title: "时间", width: "200px" },
        ]}
        {@const data = [
            { name: "张三", status: 1, date: 1577836800000, datetime: 1577851200000 },
            { name: "李四", status: 0, date: 1577923200000, datetime: 1577937600000 },
            { name: "王五", status: 1, date: "2020-01-03", datetime: "2020-01-03 12:00:00" },
            { name: "赵六", status: 0, date: "2020-01-04", datetime: "2020-01-04 12:00:00" },
            { name: "钱七", status: 1, date: "2020-01-05", datetime: "2020-01-05 12:00:00" },
            { name: "孙八", status: 0, date: "2020-01-06", datetime: "2020-01-06 12:00:00" },
            { name: "周九", status: 1, date: "2020-01-07", datetime: "2020-01-07 12:00:00" },
            { name: "吴十", status: 0, date: "2020-01-08", datetime: "2020-01-08 12:00:00" },
        ]}
        <div
            style={`height: ${height}px;
            display: flex;
            flex-direction: column;
            background-color: #f7f7f7;`}
        >
            <Table {columns} {data} border height="fitContainer"></Table>
        </div>

        <Space>
            <Button
                type="primary"
                onclick={() => {
                    height = 400 + Math.random() * 200;
                }}>设置高度</Button
            >
        </Space>
    {/snippet}
</Story>

<Story name="LargeData">
    {#snippet template(args)}
        {@const columns = [
            { type: "index", title: "序号", width: "80px" },
            { name: "name", title: "名称", width: "150px" },
            { name: "x", title: "X" },
            { name: "y", title: "Y" },
            { name: "date", title: "日期", width: "200px" },
        ]}
        {@const data = []}
        {(() => {
            for (let i = 0; i < 1000; i++) {
                data.push({
                    id: i,
                    name: "name_" + i,
                    x: Math.random() + 100,
                    y: Math.random() + 30,
                    _disabled: i % 3 === 0,
                    date: new Date().toLocaleDateString(),
                });
            }
        })()}
        <Table {columns} {data} border virtual height={300}></Table>
    {/snippet}
</Story>
